﻿<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>

<fmt:setBundle basename="ApplicationMessage" />
<fmt:setLocale value="zh_CN" />

<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <%@ include file="/WEB-INF/include/meta.jsp"%>
  <%@ include file="/WEB-INF/include/css.jsp"%>
  
  <link href="${ctx.resource}/css/shiftform.css" rel="stylesheet">
  <link href="${ctx.resource}/css/select2.css" rel="stylesheet">
  <link href="${ctx.resource}/css/select2-bootstrap.css" rel="stylesheet">
  <link href="${ctx.resource}/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
  
  <title></title>

</head>

<body>

  <%@ include file="/WEB-INF/include/header.jsp"%>

  <%@ include file="/WEB-INF/include/menu.jsp"%>
  
  <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script>

  <div class="container main-content">

    <div class="panel panel-default beast-panel beast-panel-layout">

      <div class="panel-heading">
        <ol class="breadcrumb">
          <li><a href="${ctx.host}/advertisement">统计管理</a></li>
          <li class="active">运营报表</li>
        </ol>
      </div>

      <div class="panel-body">

        <div class="col-xs-2 beast-panel-layout-left no-horizontal-padding">
          <%@ include file="/WEB-INF/include/submenu.jsp"%>
        </div>

        <div class="col-xs-10 beast-panel-layout-right">

          <div class="beast-breadcrumb-wrapper">
            <div class="beast-breadcrumb clearfix">
              <h2><i class="glyphicon glyphicon-fire" title="运营报表"></i>&nbsp;&nbsp;<span>运营报表&nbsp;-&nbsp;投放广告统计</span></h2>
            </div>
          </div>
          
          
          	<div class="col-xs-6 top-margin-40">
		    	<div id="sex" style="height:300px;"></div>
		    </div>
		    <div class="col-xs-6 top-margin-40">
		    	<div id="age"  style="height:300px"></div>
		    </div>
		    <div class="col-xs-12 top-margin-40">
		    	<div id="area"  style="height:400px"></div>
		    </div>
		    <div class="col-xs-6 top-margin-40">
		    	<div id="lifeTag" style="height:300px;"></div>
		    	
		    </div>
		    <div class="col-xs-6 top-margin-40">
		    	<div id="interestTag"  style="height:300px"></div>
		    </div>
		    <script type="text/javascript">

		    	var myChart = echarts.init(document.getElementById('sex')); 
		    	var myChart2 = echarts.init(document.getElementById('age')); 
		    	var myChart3 = echarts.init(document.getElementById('area')); 
		    	var myChart4 = echarts.init(document.getElementById('lifeTag')); 
		    	var myChart5 = echarts.init(document.getElementById('interestTag')); 

		    	sexOption = {
					    title : {
					        text: '性别分布',
					        x:'left'
					    },
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    legend: {
					    		orient : 'vertical',
					        x : 'right',
					        data:['男','女']
					    },
					    calculable : true,
					    series : [
					        {
					            name:'性别分布',
					            type:'pie',
					            radius : '55%',
					            center: ['50%', '50%'],
					            data:[
					                {value:${advertisementStatisticsDto.man}, name:'男'},
					                {value:${advertisementStatisticsDto.woman}, name:'女'}
					            ]
					        }
					    ]
					};


					ageOption = {
					    title : {
					        text: '年龄分布(岁)'
					    },
					    tooltip : {
					        trigger: 'axis'
					    },
					    legend: {
					    		orient : 'vertical',
					        x : 'right',
					        data:['男','女','总共']
					    },
					    polar : [
					       {
					           indicator : ${indicator}      
					             /*{ text: '18岁以下', max: 20000},
					               { text: '18-25岁', max: 30000},
					               { text: '26-35岁', max: 38000},
					               { text: '36-45岁', max: 52000},
					               { text: '46-55岁', max: 52000} */
					        }
					    ],
					    calculable : true,
					    series : [
					        {
					            name: '年龄分布(岁)',
					            type: 'radar',
					            data : ${radar} 
					        
					            /* [
					                {
					                    value : [120, 2, 23, 34, 123, 34],
					                    name : '男'
					                },
					                 {
					                    value : [23, 23, 23, 43, 22, 33],
					                    name : '女'
					                },
					                {
					                    value : [44, 34, 343, 343, 34, 2],
					                    name : '总共'
					                }
					            ] */
					        }
					    ]
					};

					areaOption = {
					    title : {
					        text: '地域分布',
					        x:'left'
					    },
					    tooltip : {
					        trigger: 'item'
					    },
					    legend: {
					        orient: 'vertical',
					        x:'right',
					        data:['男', '女']
					    },
					    dataRange: {
					        x: 'left',
					        y: 'center',
					        splitList: [
					            {start: 3000},
					            {start: 1000, end: 3000},
					            {start: 300, end: 1000},
					            {start: 200, end: 300},
					            {start: 10, end: 200, label: '50 到 200'},
					            {end: 50}
					        ],
					        color: ['#E0022B', '#E09107', '#A3E00B']
					    },
					    series : [
					        {
					            name: '男',
					            type: 'map',
					            mapType: 'china',
					            roam: false,
					            itemStyle:{
					                normal:{
					                    label:{
					                        show:true,
					                        textStyle: {
					                           color: "rgb(249, 249, 249)"
					                        }
					                    }
					                },
					                emphasis:{label:{show:true}}
					            },
					            data:[
					                {name: '北京',value: Math.round(Math.random()*2000)},
					                {name: '上海',value: Math.round(Math.random()*2000)},
					                {name: '浙江',value: Math.round(Math.random()*2000)},
					                {name: '广东',value: Math.round(Math.random()*2000)}
					            ]
					        },
					       {
					            name: '女',
					            type: 'map',
					            mapType: 'china',
					            roam: false,
					            itemStyle:{
					                normal:{
					                    label:{
					                        show:true,
					                        textStyle: {
					                           color: "rgb(249, 249, 249)"
					                        }
					                    }
					                },
					                emphasis:{label:{show:true}}
					            },
					            data:[
					                {name: '北京',value: Math.round(Math.random()*2000)},
					                {name: '上海',value: Math.round(Math.random()*2000)},
					                {name: '浙江',value: Math.round(Math.random()*2000)},
					                {name: '广东',value: Math.round(Math.random()*2000)}
					            ]
					        }
					    ]
					};

					lifeTagOption = {
					    title : {
					        text: '生活标签'
					    },
					    tooltip : {
					        trigger: 'axis'
					    },
					    legend: {
					    		orient : 'vertical',
					        x : 'right',
					        data:['男','女','总共']
					    },
					    polar : [
					       {
					           indicator : [
					               { text: '看书', max: 20000},
					               { text: '做菜', max: 30000},
					               { text: '教师', max: 38000},
					               { text: '主妇', max: 52000},
					               { text: '会计师', max: 52000},
					               { text: '生活1', max: 20000},
					               { text: '生活2', max: 30000},
					               { text: '生活3', max: 38000},
					               { text: '生活4', max: 52000},
					               { text: '生活5', max: 52000}
					            ]
					        }
					    ],
					    calculable : true,
					    series : [
					        {
					            name: '生活标签',
					            type: 'radar',
					            data : [
					                {
					                    value : [12000, 20000, 10000, 30000, 20000, 12000, 20000, 10000, 30000, 20000],
					                    name : '男'
					                },
					                 {
					                    value : [8000, 10000, 10000, 20000, 22000, 8000, 10000, 10000, 20000, 22000,],
					                    name : '女'
					                },
					                {
					                    value : [20000, 30000, 20000, 50000, 42000, 20000, 30000, 20000, 50000, 42000, ],
					                    name : '总共'
					                }
					            ]
					        }
					    ]
					};

					interestTagOption = {
					    title : {
					        text: '兴趣标签'
					    },
					    tooltip : {
					        trigger: 'axis'
					    },
					    legend: {
					    		orient : 'vertical',
					        x : 'right',
					        data:['男','女','总共']
					    },
					    polar : [
					       {
					           indicator : [
					               { text: '看书', max: 20000},
					               { text: '做菜', max: 30000},
					               { text: '教师', max: 38000},
					               { text: '主妇', max: 52000},
					               { text: '会计师', max: 52000},
					               { text: '生活1', max: 20000},
					               { text: '生活2', max: 30000},
					               { text: '生活3', max: 38000},
					               { text: '生活4', max: 52000},
					               { text: '生活5', max: 52000}
					            ]
					        }
					    ],
					    calculable : true,
					    series : [
					        {
					            name: '兴趣标签',
					            type: 'radar',
					            data : [
					                {
					                    value : [12000, 20000, 10000, 30000, 20000, 12000, 20000, 10000, 30000, 20000],
					                    name : '男'
					                },
					                 {
					                    value : [8000, 10000, 10000, 20000, 22000, 8000, 10000, 10000, 20000, 22000,],
					                    name : '女'
					                },
					                {
					                    value : [20000, 30000, 20000, 50000, 42000, 20000, 30000, 20000, 50000, 42000, ],
					                    name : '总共'
					                }
					            ]
					        }
					    ]
					};
					                    
					                    

					myChart.setOption(sexOption); 
					myChart2.setOption(ageOption); 
					myChart3.setOption(areaOption);
					myChart4.setOption(lifeTagOption); 
					myChart5.setOption(interestTagOption); 
					myChart.connect(myChart2).connect(myChart3).connect(myChart4).connect(myChart5);
					myChart2.connect(myChart).connect(myChart3).connect(myChart4).connect(myChart5);
					myChart3.connect(myChart).connect(myChart2).connect(myChart4).connect(myChart5);
					myChart4.connect(myChart).connect(myChart2).connect(myChart3).connect(myChart5);
					myChart5.connect(myChart).connect(myChart2).connect(myChart3).connect(myChart4);

		    </script>

      	</div>

    </div>

  </div>

  <%@ include file="/WEB-INF/include/footer.jsp"%>
  <%@ include file="/WEB-INF/include/script.jsp"%>
  <script src="${ctx.resource}/js/shiftform.js"></script>
  <script src="${ctx.resource}/js/select2.min.js"></script>
  <script src="${ctx.resource}/js/select2_locale_zh-CN.js"></script>
  <script src="${ctx.resource}/js/bootstrap-datetimepicker.js"></script>
  <script src="${ctx.resource}/js/bootstrap-datetimepicker.zh-CN.js"></script>
  

</body>

</html>
